上一篇文章讲解了如何用js+canvas实现粒子时钟,本篇文章 ,主要是使用vue重构,让它在vue也能使用。
我们使用简单的方式重构,不使用vue工程,先加入vue cdn的地址,如下:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
然后,重构Clock对象构造器,改为将canvas传入,如下:
function Clock(canvas) {
this.cxt = canvas.getContext('2d');
this.cxt.fillStyle="#ddd";
this.cxt.fillRect(0, 0, 500, 100);
this.r = 100/20-1;
}
然后,创建vue对象实例,使用生命周期装载初始化,如下:
var app = new Vue({
el: '#container',
data: {
message: 'Hello Vue!'
},
mounted() {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 100;
var clock = new Clock(canvas);
setInterval(()=>{
clock.getTime();
})
}
})
直接打开页面就好,若是用vue工程也可以
好了,这样就ok了。
若有疑问或需要素材,请加群交流:654979292
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。